<script setup name="WorkFlowCurd">
import {
  WorkFlowEdit,
  WorkFlowAdd,
  WorkFlowDel,
  WorkFlowGetLineList,
  WorkFlowAddLine,
  WorkFlowEditLine,
  WorkFlowDelLine,
  WorkFlowGetList
} from "@/api/sys/workflow";
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance();
const {sys_is,hrp_user_sex} = proxy.useDict('sys_is','hrp_user_sex');
let pd = reactive({
  open: false,
  title: "",
  operation: 0,
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null
  },
  rules: {
    enableFlag: [{
      required: true,
      message: "是否不能为空",
      trigger: "change"
    }],
    name: [{
      required: true,
      message: "名称不能为空",
      trigger: "blur"
    }],
    sex: [{
      required: true,
      message: "性别不能为空",
      trigger: "blur"
    }]
  }
});

/** 提交按钮 */
function submitForm() {
  proxy.$refs["workflowRef"].validate(valid => {
    if (valid) {
      if (pd.operation == 1) {
        submitFormAdd();
      } else if (pd.operation == 2) {
        WorkFlowEdit(pd.form).then(res => {
          proxy.$modal.msgSuccess("修改成功");
        });
      }
      pd.open = false;
      emit("ok", pd.operation);
    }
  });
  // proxy.$refs["workflowLineRef"].validate(valid => {
  //   if (valid) {
  //     pdLine.form.line = pdLine.lineList;
  //     if (pdLine.form.id) {
  //       WorkFlowEditLine(pd.form).then(res => {
  //         proxy.$modal.msgSuccess("修改成功");
  //         pdLine.open = false;
  //         getLineList();
  //       });
  //     } else {
  //       WorkFlowAddLine(pdLine.form).then(res => {
  //         proxy.$modal.msgSuccess("新增成功");
  //         pdLine.open = false;
  //         getLineList();
  //       });
  //     }
  //   }
  // });
}

/** 提交按钮 */
function submitFormAdd() {
  if (pd.form.id > 0) {
    return
  }
  proxy.$refs["workflowRef"].validate(valid => {
    if (valid) {
      WorkFlowAdd(pd.form).then(res => {
        pd.form.id = res.data.id;
        pdLine.queryParams.id = res.data.id;
        proxy.$modal.msgSuccess("新增成功");
      });
    }
  });
}

// 新增
function add(workflow) {
  reset();
  //合并
  pd.form = {...pd.form, ...workflow};
  pd.title = "新增审批流程";
  pd.operation = 1;
  pd.open = true;
  pdLine.loading = false;
  getLineList();
}

// update
function edit(workflow) {
  reset();
  //合并
  pd.form = {...pd.form, ...workflow};
  pd.title = "修改审批流程";
  pd.operation = 2;
  pd.open = true;
  pdLine.queryParams.id = pd.form.id;
  getLineList();
}


// del
function del(id) {
  proxy.$modal.confirm('是否确认删除样例代码编号为:"' + id + '"的数据及子数据？').then(function () {
    return WorkFlowDel(id);
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功");
    pd.open = false;
    pd.operation = 3;
    emit("ok", pd.operation);
  }).catch(() => {
  });
}

// 表单重置
function reset() {
  pd.form = {
    id: null,
    name: null,
    sex: null,
    state: "0",
    enableFlag: "0",
    remark: null
  };
  pd.operation = 0;
  pd.title = "";
  lineReset();
  proxy.resetForm("workflowRef");
}

defineExpose({add, edit, del});
const emit = defineEmits(["ok"]);
//===============子表数据增删改查=========================================================
let pdLine = reactive({
  lineList: [],
  open: false,
  loading: true,
  form: {},
  operation: 0,
  queryParams: {
    id: null,
    lineName: null
  },
  rules: {
    enableFlag: [{
      required: true,
      message: "是否不能为空",
      trigger: "change"
    }],
    lineName: [{
      required: true,
      message: "名称不能为空",
      trigger: "blur"
    }]
  }
});

/** 新增按钮操作 */
function lineAddOpen() {
  lineReset();
  if (!pd.form.id > 0) {
    submitFormAdd();
  }
  if (pd.form.id > 0){
    pdLine.form.id = pd.form.id;
    pdLine.queryParams.id = pd.form.id;
  }else {
    return
  }
  pdLine.title = "新增子样例数据";
  pdLine.operation = 1;
  pdLine.open = true;
  // let line = {};
  // line.state = "1";
  // line.indexRow = pdLine.lineList.length;
  // pdLine.lineList.push(line)
}

/** 修改按钮操作 */
function lineEditOpen(line) {
  lineReset();
  pdLine.title = "修改子节点数据";
  pdLine.operation = 2;
  pdLine.form = {...pdLine.form, ...line};
  pdLine.open = true;
}



/** 删除操作 */
function delLine(lineId) {
  proxy.$modal.confirm('是否确认删除 子样例代码编号为:"' + lineId + '"的数据项？').then(function () {
    return WorkFlowDelLine(lineId);
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功");
    getLineList();
  }).catch(() => {
  });
}

function getLineList() {
  // pdLine.loading = true;
  // WorkFlowGetLineList(pdLine.queryParams).then(res => {
  //   pdLine.lineList = res.data;
  //   pdLine.open = false;
  //   pdLine.loading = false;
  //   pdLine.operation = 0;
  // });

  if (!pd.form.id) {
    return;
  }
  pd.loading = true;
  WorkFlowGetLineList({id: pd.form.id}).then(res => {
    pdLine.lineList = res.data;
    pdLine.lineList.forEach((value, index, array) => {
      value.indexRow = index;
    });
    pdLine.loading = false;
  });
}

// 表单重置
function lineReset() {
  pdLine.form = {
    id: pd.form.id,
    lineId: null,
    lineName: null,
    orderNum: null,
    state: "0",
    enableFlag: "0",
    remark: null
  };
  pdLine.lineList = [];
  pdLine.title = "";
  proxy.resetForm("workflowLineRef");
}

/** 子数据提交按钮 */
function submitLineForm() {
  proxy.$refs["workflowLineRef"].validate(valid => {
    if (valid) {
      if (pdLine.operation == 1) {
        WorkFlowAddLine(pdLine.form).then(res => {
          proxy.$modal.msgSuccess("新增成功");
          pdLine.open = false;
          getLineList();
        });
      } else if (pdLine.operation == 2) {
        WorkFlowEditLine(pdLine.form).then(res => {
          proxy.$modal.msgSuccess("修改成功");
          pdLine.open = false;
          getLineList();
        });
      }
    }
  });

}
</script>

<template>
  <!-- 添加或修改流程代码对话框 -->
  <el-dialog :title="pd.title" v-model="pd.open" width="1000px" append-to-body>
    <el-form ref="workflowRef" :model="pd.form" :rules="pd.rules" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="名称" prop="name" width="80px">
            <el-input v-model="pd.form.name" placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!--          <el-form-item label="性别" prop="sex" width="80px">-->
          <!--            <el-select v-model="pd.form.sex" placeholder="请选择性别">-->
          <!--              <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"-->
          <!--                         :value="dict.value"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
        </el-col>
        <el-col :span="6">
          <el-form-item label="启用" prop="enableFlag">
            <el-switch v-model="pd.form.enableFlag" active-value="0" inactive-value="1"></el-switch>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="6">-->
        <!--          <el-form-item label="状态" prop="state">-->
        <!--            <el-switch v-model="pd.form.state" active-value="0" inactive-value="1"></el-switch>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="pd.form.remark" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button v-if="pd.operation===1" icon="Plus" type="success" @click="submitForm">保存</el-button>
        <el-button v-if="pd.operation===2" icon="Delete" type="danger" @click="del(pd.form.id)">删除</el-button>
      </el-col>
      <el-col v-if="pd.operation===2" :span="1.5">
        <el-button icon="Plus" type="success" @click="submitForm">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="Close" type="info" @click="pd.open = false">关闭</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="lineAddOpen" v-hasPermi="['sys:workflow:add']">新增一行</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="Refresh" @click="getLineList">刷新</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="pdLine.loading" :data="pdLine.lineList">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="名称" align="center" prop="lineName">
        <template #default="scope">
          <el-link type="primary" @click="lineEditOpen(scope.row)" v-hasPermi="['sys:workflow:edit']">
            {{ scope.row.lineName }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="启用" align="center" prop="enableFlag">
        <template #default="scope">
          <dict-tag :options="sys_is" :value="scope.row.enableFlag"/>
        </template>
      </el-table-column>
      <!--      <el-table-column label="状态" align="center" prop="state">-->
      <!--        <template #default="scope">-->
      <!--          <dict-tag :options="sys_state" :value="scope.row.state"/>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="流程顺序" align="center" prop="orderNum"/>
      <el-table-column label="创建人" align="center" prop="createBy" width="70"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="150">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新人" align="center" prop="updateBy"/>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="100">
        <template #default="scope">
          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="lineEditOpen(scope.row)" v-hasPermi="['sys:workflow:edit']">
            修改
          </el-button>
          <el-button link type="primary" icon="Delete" @click="delLine(scope.row.lineId)"
                     v-hasPermi="['sys:workflow:del']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <!-- 添加或修改子数据项 -->
  <el-dialog :title="pdLine.title" v-model="pdLine.open" width="700px" append-to-body>
    <el-form ref="workflowLineRef" :model="pdLine.form" :rules="pdLine.rules" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="名称" prop="name" width="80px">
            <el-input v-model="pdLine.form.lineName" placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="流程顺序" prop="orderNum" width="80px">
            <el-input v-model="pdLine.form.orderNum" placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="启用" prop="enableFlag">
            <el-switch v-model="pdLine.form.enableFlag" active-value="0" inactive-value="1"></el-switch>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="6">-->
        <!--          <el-form-item label="状态" prop="state">-->
        <!--            <el-switch v-model="pdLine.form.state" active-value="0" inactive-value="1"></el-switch>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="pdLine.form.remark" type="textarea" placeholder="请输入内容"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="pdLine.operation===1" type="primary" @click="submitLineForm">新 增</el-button>
        <el-button v-if="pdLine.operation===2" type="success" @click="submitLineForm">修 改</el-button>
        <el-button v-if="pdLine.operation===2" type="danger" @click="delLine(pd.form.id)">删 除</el-button>
        <el-button type="info" @click="pdLine.open = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang='scss' scoped>

</style>